Neuer Tab
In diesem Tutorial lernst du, wie du einen neuen Tab in das Lehrportal bzw. Lernportal einfügst.
Als Beispiel wollen wir ein Notizfeld implementieren. Dafür müssen wir im HTML das Tab mit dem Notizfeld und die dazugehörige Navigation anlegen. Im JavaScript lernen wir, wie eine neue Kachel angelegt wird und wie die Eintragungen im Notizfeld mit dem Portfolio gespeichert und geladen werden.
HTML
Im HTML wird die statische Struktur des ELP festgelegt. Dazu gehört sowohl der neue Tab als auch die Navigation zu diesem.
Da das neue Tab direkt im bestehenden HTML eingefügt wird und das HTML sich beständig verändert, wird im Tutorial keine Zeilenangabe verwendet. Stattdessen wird für jede Eingabe bzw. Änderung eine eindeutige Zeile als Referenz angegeben, mit der die entsprechende Stelle leicht gefunden werden kann.
Neuer Tab
Tabs sind Kindelemente eines Elements mit der Klasse tab-content. Das wichtige tab-content für das neue Notiz-Tab ist das, welches als erstes Kindelement das Tab mit der id nav-start-tab hat, also wie folgt aussieht:
<div class="tab-content">
<div id="nav-start-tab" class="tab-pane fade in active">
Nun fügen wir also ein neues Tab nach dem Beispiel von nav-start-tab ein. Dabei ist wichtig, dass es eine eindeutige neue ID bekommt, beispielsweise nav-notizen-tab. Als einfaches Notizfeld reicht hier ein einfaches <textarea>-Element. Die Reihenfolge im tab-content ist nicht wichtig, sollte aber am Besten der Reihenfolge in der Navigation entsprechen. Als Beispiel fügen wir das neue Tab am Ende ein.
tip
Wenn der Text formatiert werden soll und auch andere Inhalte wie Bilder direkt eingebunden werden sollen, dann verwende den CKEditor 5, siehe hier.
Damit sieht das HTML nun wie folgt aus:
<div class="tab-content">
<div id="nav-start-tab" class="tab-pane fade in active">
[...]
</div>
[...]
<div id="nav-notizen-tab" class="tab-pane fade">
<textarea class="form-content" id="nav-notizen-tab-textarea" style="resize: both"></textarea>
</div>
</div>
Noch kann das Tab allerdings nicht angezeigt werden, dafür muss ein Eintrag in der Navigation erstellt werden.
Navigation zum neuen Tab
Die Hauptnavigation ist in der selben Datei. Die Navigationszeile hat die ID mainmenu. Die Liste mit den Klassen nav nav-pills navbar-left beinhaltet die Einträge, welche jeweils aus einem Link in einem Listenelement bestehen.
<div id="mainmenu" class="menu">
<div class="container">
<ul class="nav nav-pills navbar-left">
<li><a id="home" href="index.html" class="logo elp-logo"></a></li>
Funktional würde es reichen, einen vorhandenen Eintrag zu duplizieren, beispielsweise den Eintrag mit der ID nav-start, und den Link im href auf #nav-notizen-tab zu ändern. Allerdings wird die Navigationszeile so unhandlich. Stattdessen fügen wir den Eintrag in das Dropdown-Menü vom Dashboard ein. Dies ist einfach durch die ID nav-dashboard zu finden.
<ul class="dropdown-menu">
<li>
<a
id="nav-dashboard"
data-toggle="pill"
href="#nav-dashboard-tab"
[...]
>Dashboard anzeigen</a
>
</li>
[...]
</ul>
Wir fügen einen neuen Eintrag an das Ende der Liste mit der Klasse dropdown-menu ein und passen dabei den Link in href an. Eine eindeutige ID hilft vereinfacht es, das Tab auch per JavaScript anzuzeigen. Die Stelle sieht nun wie folgt aus:
<ul class="dropdown-menu">
[...]
<li>
<a
id="nav-notizen"
data-toggle="pill"
href="#nav-notizen-tab"
>Notizen</a
>
</li>
</ul>
Der Eintrag kann nun ausgewählt und damit das Tab angezeigt werden. Allerdings ist die Funktionalität des Notizfeldes noch stark eingeschränkt, insbesondere werden die Notizen nicht gespeichert und sind damit bei einem Neuladen der Seite verloren. Darum kümmern wir uns im nächsten Abschnitt zu JavaScript.
JavaScript
Das Notizentab ist im HTML definiert und per Navigation aufrufbar. Allerdings fehlt es noch in den Kacheln des Dashboards und weitere Funktionalität wie das Speichern und Laden mit dem Portfolio.
Änderungen in JavaScript
Um Änderungen im JavaScript tatsächlich in das ELP einzubinden, muss nach jedem Schritt grunt tersering in der Kommandozeile ausgeführt werden. Mehr dazu hier.
Neue Kachel im Dashboard
Die Kacheln des Dashboards werden in den Einstellungen des ELP unter eLP.config.tools definiert. Die Standard-Konfiguration wird beim Start definiert, alternativ kann sie beim Zurücksetzen bzw. Anlegen eines neuen Portfolios auf Startwerte festgelegt werden. Die Konfiguration sieht wie folgt aus:
tools: [
{
langkey: 'nav-collection',
target: 'sammlung',
icon: 'fa fa-th-list',
},
[...]
{
langkey: 'infothek',
target: 'infothek',
icon: 'fa fa-info-circle',
whitelist: ['lehrportal'],
},
[...]
],
Die Konfiguration ist also ein Array aus Objekten. Jedes dieser Objekte definiert eine Kachel. Das Attribut langkey legt die Beschriftung anhand der Übersetzungsdateien fest. Wenn der Name nicht übersetzt werden soll, dann kann er hier direkt mit dem Attribut name angegeben werden. target spezifiziert im event listener für Klicks auf Kacheln, welche Funktionalität ausgeführt werden soll. icon legt fest, welches Icon von fontawesome angezeigt werden soll. whitelist bzw. blacklist bieten die Möglichkeit, Kacheln abhängig von eLP.config.type ein- bzw. auszublenden.
Eine Beispielkonfiguration für das Notiztab könnte wie folgt aussehen:
tools: [
[...]
{
name: 'Notizen',
target: 'notizen',
icon: 'fa fa-pencil-square-o',
},
],
Damit wird die Kachel zwar definiert und angezeigt, aber ein Klick bewirkt noch nichts. Um dies zu ändern kann entweder ein neuer Listener definiert werden, oder der bereits vorhandene Listener angepasst werden. Der vorhandene Listener sieht wie folgt aus:
$('body').on(
'click',
'.kachel[data-target]:not([disabled]), .tool[data-target]:not([disabled])',
function () {
var $this = $(this);
switch ($this.data('target')) {
case 'sammlung':
$('#nav-collection').click();
break;
[...]
In dem switch kann einfach ein neuer case mit dem Attribut target der neuen Notiz-Kachel eingefügt werden. Um das Notizentab anzuzeigen, wird einfach ein Klick auf dem entsprechenden Eintrag in der Navigation ausgeführt. Der Abschnitt sieht nun wie folgt aus:
$('body').on(
'click',
'.kachel[data-target]:not([disabled]), .tool[data-target]:not([disabled])',
function () {
var $this = $(this);
switch ($this.data('target')) {
[...]
case 'notizen':
$('#nav-notizen').click();
break;
[...]
Speichern der Notizen im Portfolio
Um Eingaben in das Notizenfeld zu speichern, muss zu geeignetem Zeitpunkt eine entsprechende Funktion ausgeführt werden. Dafür bietet sich ein event listener zum change-Event an. Da das textarea-Element direkt im HTML definiert ist, kann direkt der event listener einmalig beim Laden des ELP definiert werden. Dafür fügen wir am Ende der jQuery .ready-Funktion (siehe Nutiz) den folgenden Code ein:
$('#nav-notizen-tab-textarea').on('change', function () {
eLP.config.notizen = this.value;
});
Damit wird bei jeder Änderung von textarea.value der neue Wert in dem Konfigurations-Objekt von ELP gespeichert. eLP.config ist hier für einen Test praktisch da es bereits beim Speichern des Portfolios (entweder manuell beim Herunterladen oder im Cache beim Verlassen der Seite) mitgespeichert und beim Laden ebenfalls mitgeladen wird.
Ein sinnvoller Zeitpunkt für den umgekehrten Schritt, das Laden des gespeicherten Wertes in eLP.config.notizen in das textarea, ist der Aufruf des Tabs. Dafür muss auf der Navigation zum Tab auf das Event show.bs.tab gehört werden. Entsprechend fügen wir die folgende Funktion nach der letzten neuen Funktion hinzu:
$('#nav-notizen').on('show.bs.tab', function () {
document.getElementById('nav-notizen-tab-textarea').value = eLP.config.notizen || '';
});
jQuery .ready-function
Der größte Teil des ELP-JavaScripts wird innerhalb der folgenden Funktion definiert, deren schließende Klammer die letzte Zeile der Datei ist. Dies verzögert das Ausführen der Funktionen, bis das HTML vollständig geladen wurde. Desweiteren ist nur innerhalb dieser Funktion die Variable veranstaltung definiert, welche die aktuell ausgewählte Veranstaltung des ELP angibt.
$(document).ready(function () {
'use strict';
[...]
[Almost all code]
[...]
});